<template>
  <div style="">
    <Header :left="true" leftText="返回" title="实际用工-填报界面"> </Header>
    <div class="textScroll">
      <Form :style="autoHeight">
        <van-field
          label="部门名称"
          :value="companyname"
          readonly
          class="formstyle"
        />

        <van-cell
          title="日期选择"
          class="formstyle"
          required
          placeholder="请选择日期"
          is-link
          :value="form.planworkdatetime"
          @click="showdate = true"
        />
        <van-calendar
          :min-date="minDate"
          color="#1989fa"
          v-model="showdate"
          @confirm="onConfirm"
        />

        <van-field
          required
          readonly
          label="班次选择"
          placeholder=""
          class="formstyle"
        />
        <van-radio-group
          title="班次选择"
          v-model="form.pshiftid"
          direction="horizontal"
        >
          <van-radio name="1" checked-color="#138087" class="radioteam">白班</van-radio>
          <van-radio name="2" checked-color="#138087" class="radioteam">夜班</van-radio>
          <van-radio name="3" checked-color="#138087" class="radioteam">中班</van-radio>
          <van-radio name="4" checked-color="#138087" class="radioteam">转班(白)</van-radio>
          <van-radio name="5" checked-color="#138087" class="radioteam">转班(夜)</van-radio>
        </van-radio-group>

        <van-field required readonly label="实际用工人数" class="formstyle" />
        <van-stepper class="radioteam" v-model="form.factworksused" step="1" />

        <van-field
          v-model="form.workhour"
          required
          type="number"
          label="实际用工工时"
          placeholder="请输入工时"
          class="formstyle"
        />

        <van-field
          readonly
          is-link
          required
          clickable
          label="用工类型"
          class="formstyle"
          :value="form.workertype"
          placeholder="选择用工类型"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="employeetype"
            @cancel="showPicker1 = false"
            @confirm="onConfirmemployeetype"
          />
        </van-popup>

        <!-- <NoticeBar color="#1989fa" background="#ecf9ff" left-icon="video"
          >多媒体信息</NoticeBar
        >
        <Field
          :readonly="true"
          name="checkres"
          size="large"
          class="formstyle"
          @click="showCamera"
          label="资料上传"
          placeholder="————点击拍照————"
          right-icon="assets/right.png"
        />
        <div v-if="form.filesource !== undefined && form.filesource.length > 0">
          <div
            style="margin-left: 15px"
            v-for="(imgUrl, ks) in form.filesource"
            :key="ks"
          >
            <div class="van-uploader__wrapper" style="float: left">
              <div class="van-uploader__preview">
                <div
                  @click="picShow(ks)"
                  class="van-image van-uploader__preview-image"
                >
                  <img :src="imgUrl" class="van-image__img" />
                </div>
                <div
                  class="van-uploader__preview-delete"
                  @click="delObj('pic', imgUrl)"
                >
                  <i
                    class="van-icon van-icon-cross van-uploader__preview-delete-icon"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </Form>

      <Button
        color="#f58220"
        :block="true"
        class="buttonLeft"
        v-show="btnShow"
        type="primary"
        text="取消"
        @click="close"
      />
      <Button
        color="#138087"
        :block="true"
        class="buttonRight"
        v-show="btnShow"
        :hairline="false"
        type="primary"
        text="保存"
        @click="saveform"
      />
    </div>
  </div>
</template>

<script>
import {
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Row,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Col,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);

export default {
  name: "actuallabor",
  components: {
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    VTable,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
  },
  data: function () {
    return {
      minDate: new Date(2021, 12, 1),
      companyname: "",
      employeetype: ["操作工"],
      showPicker1: false,
      btnShow: true,
      subButton: true, //提交按钮默认状态
      date: "",
      showdate: false,
      cascaderValue: "",
      form: {
        companyid: "", //公司代码
        planworkdatetime: "", //操作时间
        workertype: "操作工", //用工类型
        workhour: 0, //用工工时
        factworksused: 1, //实际用工人数
        pshiftid: "1", //班次
        checked: 1, //审核状态
        creator: "",
        checktor: "",
      },
    };
  },
  //页面初始化监听事件
  created: function () {
    this.user = JSON.parse(storage.get("user"));
    var myDate = new Date();
    this.form.planworkdatetime =
      myDate.getFullYear() +
      "-" +
      (myDate.getMonth() + 1) +
      "-" +
      myDate.getDate();
    //获取部门明细
    this.form.creator = this.user.userId;
    this.form.checktor = this.user.userId;
    this.companyname = this.user.dept.deptName;
    this.form.companyid = this.user.dept.deptId;
  },
  //页面初始化完成监听事件
  mounted: function () {
    const oldHight = api.winHeight;
    addEventListener("resize", () => {
      let newHight = api.winHeight;
      this.btnShow = newHight < oldHight ? false : true;
    });
  },
  methods: {
    onConfirmemployeetype(value) {
      this.form.workertype = value;
      this.showPicker1 = false;
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.form.companyid = selectedOptions
        .map((option) => option.text)
        .join("/");
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showdate = false;
      this.form.planworkdatetime = this.formatDate(date);
    },

    //保存
    async saveform() {
      let _this = this;
      if (_this.form.planworkdatetime == "") {
        Toast.fail("请选择日期");
        return;
      }
      if (_this.form.workhour == 0) {
        Toast.fail("请输入实际用工工时");
        return;
      }
      if (
        parseFloat(_this.form.workhour) >
        parseFloat(_this.form.factworksused) * 24
      ) {
        Toast.fail("实际用工数值超出异常");
        return;
      }
      if (parseFloat(_this.form.workhour) < 1.0) {
        Toast.fail("实际用工数值小于异常");
        return;
      }
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "保存中...",
      });
      // _this.form.faultRank = _this.faultRanktMap.get(_this.form.callReason)
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/manhourfact/actuallabor/save",
          {
            body: {
              companyid: _this.form.companyid,
              planworkdatetime: _this.form.planworkdatetime,
              workertype: _this.form.workertype,
              factworksused: _this.form.factworksused,
              pshiftid: _this.form.pshiftid,
              checked: _this.form.checked,
              creator: _this.form.creator,
              checktor: _this.form.checktor,
              workhour: _this.form.workhour,
            },
          }
        );
        if (res.code === 200) {
          Toast.success(res.msg);
          _this.reset();
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    async delObj(fType, fUrl) {
      this.btnLoading = false;
      let fname = "";
      try {
        if (fUrl != undefined && fUrl != "" && fUrl != null) {
          fname = fUrl.substring(fUrl.lastIndexOf("/") + 1);
        }
        let res = await _httpClient.delete(
          _httpClient.getApiPrefix() + "/minio/oss/" + fname
        );
        if (res.code === 200) {
          let flist = [];
          if (fType === "audio") {
            flist = this.form.audioList;
          } else if (fType === "video") {
            flist = this.form.videoList;
          } else if (fType === "pic") {
            flist = this.form.picList;
          }
          if (flist.length > 0) {
            for (var i = 0; i < flist.length; i++) {
              if (flist[i] == fUrl) {
                flist.splice(i, 1);
              }
            }
          }
          Toast.success(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    close() {
      api.closeWin();
    },
    reset() {
      this.form.factworksused = null;
      this.form.planworkdatetime = null;
      this.form.workhour = 0;
      this.form.pshiftid = 1;
    },
  },
};
</script>

<style>
body {
  background-color: white;
}
.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 24px;
  margin-bottom: 10px;
}
.formstyle {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.table-title-class {
  background-color: #304156;
  color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}
.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 4rem;
  bottom: 5rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  z-index: 1;
}
.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}
.mg5 {
  margin-right: 5px;
}
.tag_margin {
  margin: 2px 5px;
}
.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}
.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}
.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}
.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}
.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}
</style>
